
export function useCanvasDiv(controller) {

    const getCanvasQuery = (id) => {
        return new Promise((resolve, reject) => {
            uni.createSelectorQuery()
                .select(id) // 在 WXML 中填入的 id
                .fields({ node: true, size: true })
                .exec(async (res) => {
                    // Canvas 对象
                    const canvas = res[0].node
                    // Canvas 画布的实际绘制宽高
                    const renderWidth = res[0].width
                    const renderHeight = res[0].height
                    // Canvas 绘制上下文
                    const ctx = canvas.getContext('2d')
                    // 初始化画布大小
                    const dpr = uni.getWindowInfo().pixelRatio

                  // console.log('res',{ dpr, renderWidth, renderHeight})
                    canvas.width = renderWidth * dpr
                    canvas.height = renderHeight * dpr
                    ctx.scale(dpr, dpr)
                    resolve({ctx, canvas})
                })
        })
    }


    function touchStart(e) {
        // console.log('touchStart', e)
        const touch = e.touches[0];
        const touch1 = e.touches[1];
        e.touches[0] = this.processEventVector(touch);
        if (touch1) e.touches[1] = this.processEventVector(touch1);
        controller.value.down(e);
    }
    function touchMove(e) {
        const touch = e.touches[0];
        const touch1 = e.touches[1];
        e.touches[0] = this.processEventVector(touch);
        if (touch1) e.touches[1] = this.processEventVector(touch1);
        controller.value.move(e);
    }
    function touchUp(e) {
        const touch = e.changedTouches[0];
        e.changedTouches[0] = this.processEventVector(touch);
        controller.value.up(e);
    }


    return {
        getCanvasQuery,
        touchStart,
        touchMove,
        touchUp
    }
}
